<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>	
	<title>baidu_task_1_2</title>
	<link type="text/css" rel="stylesheet" href="./css/task2.css" />
		<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>      
    <![endif]-->
</head>
<body>
	<header>
		<nav>
		    <a href="https://www.baidu.com" id="logo"></a>
			<ul>
				<li ><a href="http://www.baidu.com">导航链接一</a></li>
				<li ><a href="http://www.baidu.com">导航链接二</a></li>
				<li ><a href="http://www.baidu.com">导航链接三</a></li>
				<li ><a href="http://www.baidu.com">导航链接四</a></li>
			</ul>	
		</nav>										
	</header>
	<div class="section section1">
		<h2>文章一级标题</h2>
		<h3>文章二级标题</h3>
		<div class="author"><span>文章作者</span><span>文章发表时间</span></div>
		<p>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，换行了<br></p>
		<p>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，换行了<br></p>
		<p>这是一个很长很长的段，这是一个很长很长的段，<a href="http://ife.baidu.com">这里有一个连接</a>这是一个很长很长的段，这是一个很长很长的段<strong>这里有一行粗体字</strong>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，换行了<br></p>
		<img src="./image/2.jpg" alt="image1"  width="40%">
		<p>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，换行了<br></p>
		<p>这是一个很长很长的段，这是一个很长很长的段，<a href="http://ife.baidu.com">这里有一个连接</a>这是一个很长很长的段，这是一个很长很长的段<strong>这里有一行粗体字</strong>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段.</p>
	</div>
	<div class="section section2">
		<h2>文章一级标题</h2>
		<h3>文章二级标题</h3>
		<div class="author"><span>文章作者</span><span>文章发表时间</span></div>
		<p>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，换行了<br></p>
		<p>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，换行了<br></p>
		<p>这是一个很长很长的段，这是一个很长很长的段，<a href="http://ife.baidu.com">这里有一个连接</a>这是一个很长很长的段，这是一个很长很长的段<strong>这里有一行粗体字</strong>这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段，这是一个很长很长的段.</p>
		<img src="./image/4.jpg" alt="image1"  width="40%">
		<ul>
			<li>列表项目1</li>
			<li>列表项目2</li>
			<li>列表项目3</li>
		</ul>
	</div>			
	<div class="section section3">
		<h2>图片</h2>
		<ul>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
			<li>好看的图片<br><img src="./image/3.jpg" alt="image" width="40%"></li>
		</ul>
	</div>	
	<div class="section section4">
		<h2>最后一篇文章一级标题</h2>
		<h3>文章二级标题</h3>
		<div class="author"><span>文章作者</span><span>文章发表时间</span></div>		
		<ol>
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol>
		<strong>下面是一个表格，加了一个border好让你看出是一个表格</strong>
		<table >
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
			<tr>
				<td>表内容单元格</td>
				<td>表内容单元格</td>
				<td><a href="#">操作</a></td>
				
			</tr>
			<tr>
				<td>表内容单元格</td>
				<td>表内容单元格</td>
				<td><a href="#">操作</a></td>
				
			</tr>
			<tr>
				<td>表内容单元格</td>
				<td>表内容单元格</td>
				<td><a href="#">操作</a></td>
			</tr>
			<tr>
				<td>表内容单元格</td>
				<td>表内容单元格</td>
				<td><a href="#">操作</a></td>
				
			</tr>
			<tr>
				<td>总计</td>
				<td colspan="2">1000</td>
				<!-- 跨行跨列：colspan rowspan -->
			</tr>
		</table>
	</div>	
	<div class="section section5">
		<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
		<h3>侧栏注册窗口标题</h3>
		<form >
			<div class="form-tips">请输入邮箱地址:</div>
			<div class="user-content">
			<input class="text-content" type="email" placeholder="请输入邮箱地址">
			</div>
					
			<div class="tips">邮箱地址请按要求格式输入</div>

			<div class="form-tips">请输入密码:</div>
			<div class="user-content">
			<input class="text-content" type="password" placeholder ="这是一个文本输入框">
			</div>

			<div class="form-tips">请重复输入密码：</div>
			<div class="user-content">
			<input class="text-content" type="password" placeholder="这是一个文本输入框">
			</div>
			
			<div class="tips">密码请为6-16位英文数字</div>

			
			<div class="form-tips">性别：</div>
			<div class="user-content">
			<label><input type="radio" name="sex" value="man" checked="checked">男</label>
			<label><input type="radio" name="sex" value="woman">女</label>
			</div>
			
			<div class="form-tips">城市：</div>	
			<div class="user-content">		
			<select name="city">
				<option value="">北京</option>
				<option value="" selected="selected">上海</option>
				<option value="">杭州</option>
			</select>
			</div>
			
			<div class="form-tips">爱好：</div>
			<div class="user-content">			
			<label for=""><input type="checkbox">运动</label>
			<label for=""><input type="checkbox">艺术</label>
			<label for=""><input type="checkbox" checked="checked">科学</label>
			</div>
			
			<div class="form-tips">个人描述：</div>
			<div class="user-content">	
			<textarea name="description" placeholder="这是一个多行文本输入框，输入您的个人描述" cols="30" rows="2"></textarea>
			</div>
			
			<input type="submit" value="确认提交">
		</form>	
	</div>
	<footer>版权所有&#169;</footer>
</body>
</html>
